<!-- 牛群结构-牛群列表，编辑 -->
<template>
    <el-drawer
        :model-value="isShowEdit"
        size="800"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <template #header>
            <strong style="font-weight: bold; color: #000;">编辑</strong>
        </template>
        <template #default>
            <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 800px">
                <el-form-item label="牛号" prop="code">
                    <el-input clearable v-model="form.code" />
                </el-form-item>
                <el-form-item label="品种" prop="breed">
                    <el-select clearable v-model="form.breed">
                        <el-option v-for="(item, index) in breedList" :key="index" :label="item.name" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select clearable v-model="form.gender">
                        <el-option label="母" :value="0" />
                        <el-option label="公" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker clearable style="width: 100%;" v-model="form.birthday" type="date" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="父亲牛号" prop="fatherId">
                    <el-select clearable filterable v-model="form.fatherId">
                        <el-option v-for="item in allComNameList_fu" :label="`${item.code}-${item.breed}-${item.genderName}-${item.age}`" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="母亲牛号" prop="motherId">
                    <el-select clearable filterable v-model="form.motherId">
                        <el-option v-for="item in allComNameList_mu" :label="`${item.code}-${item.breed}-${item.genderName}-${item.age}`" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelHandler">取消</el-button>
                <el-button type="primary" @click="confirmHandler">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, reactive, onUpdated, onMounted } from 'vue'
import { reqGetCowMilkInfo, reqGetCowMilkUpdate } from '@/api/daily'
import { reqGetComNameList } from '@/api/company'
import { ElMessage } from 'element-plus'
import { reqGetCowGetInfo, reqGetBreedList, reqCowUpdate } from '@/api/cattleStructure'

// 表单收集
let form = reactive({
    id: '',
    code: '', // 牛号
    breed: '', // 品种
    age: '', // 年龄
    gender: '', // 性别
    birthday: '', // 出生日期
    fatherId: '', // 父亲牛号
    motherId: '', // 母亲牛号
})

// 接收父组件传递过来的值
let props = defineProps(['isShowEdit', 'editId'])

// 自定义事件，子传父
let $emit = defineEmits(['closeEditDrawer'])

// 获取牛号下拉列表_父亲牛号
let allComNameList_fu = ref([])
const getComNameList_fu = async () => {
    let res = await reqGetComNameList({
        gender: 1
    })
    allComNameList_fu.value = res.data
}

// 获取牛号下拉列表_母亲牛号
let allComNameList_mu = ref([])
const getComNameList_mu = async () => {
    let res = await reqGetComNameList({
        gender: 0
    })
    allComNameList_mu.value = res.data
}

// 获取牛品种，筛选下拉列表
let breedList = ref([])
const getBreedList = async () => {
    let res = await reqGetBreedList()
    breedList.value = res.data
}

// 根据主键获取 信息
const getCowGetInfo = async () => {
    let res = await reqGetCowGetInfo({ id: props.editId })
    Object.assign(form, res.data)
    console.log('根据主键获取---牛信息', form)
}

// 取消按钮
const cancelHandler = () => {
    $emit('closeEditDrawer', false)
    // 清空表单
    // formRef.value.resetFields()
}

// 保存按钮
const formRef = ref()
const confirmHandler = async () => {
    let res = await reqCowUpdate(form)
    console.log('编辑保存', res)
    if(res.status == 200){
        ElMessage({
            type: 'success',
            message: '编辑成功'
        })
        $emit('closeEditDrawer', false)
        formRef.value.resetFields() // 清空表单
    }else{
        ElMessage({
            type: 'warning',
            message: res.msg
        })
    }
}

// 组件挂载
onMounted(() => {
    getBreedList()
    getComNameList_fu()
    getComNameList_mu()
})

// 组件更新
onUpdated(() => {
    getCowGetInfo()
})
</script>